<template>
  <div>
    <h3>我的收藏</h3>
    <table>
      <thead>
        <tr>
          <th>收藏ID</th>
          <th>用户ID</th>
          <th>视频ID</th>
          <th>收藏时间</th>
          <th>详情页面</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="item in collectList" :key="item.cid">
        <td>{{ item.cid }}</td>
        <td>{{ item.uid }}</td>
        <td>{{ item.vid }}</td>
        <td>{{ item.collectTime }}</td>
        <td><a :href="'http://localhost:5173/#/movie/' + item.vid">点击跳转</a></td>
        <td>
          <el-button type="danger" @click="deleteCollect(item.cid)">删除</el-button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import store from '@/store/index.js';
import { getCollectList, delCollect } from '@/api/collect.js';
export default {
  data() {
    return {
      currentUid: '0',
      collectList: []
    }
  },
  created() {
    this.currentUid = this.$store.getters.getUser.name;
    this.getCollection();
  },
  methods: {
    async getCollection() {
      const { data } = await getCollectList({ uid: this.currentUid });
      if (data.code === 1) {
        this.collectList = data.data;
      }
    },
    async deleteCollect(cid) {
      await delCollect(cid);
      await this.getCollection();
    }
  }
};
</script>

<style scoped>
  div {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    width: 80%;
  }

  h3 {
    color: #333;
    text-align: center;
    padding: 20px 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 50px 0;
  }

  th, td {
    height: 50px;
    text-align: center;
    border: 1px solid #ddd;
  }

  th {
    background-color: #4CAF50;
    color: white;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  a {
    color: #2196F3;
    text-decoration: none;
  }

  a:hover {
    color: #0b75b2;
  }

  button {
    background-color: #f44336; /* Red */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

  button:hover {
    background-color: #d32f2f;
  }
</style>
